/**
 * Charts5
 */
import React  from 'react'
import style from './index.less'
import moment from 'moment'
import {IECharts} from '../../../../components'

const Charts5=({
	data=[
		{
			"name":"指数1",
			"value":20
		},{
			"name":"指数2",
			"value":70
		}
	],
	color=['#2EC7C9', '#B6A2DE', '#5AB1EF', '#FFB980','#D87A80','#8D98B3'],
	height=220
})=>{
	const myProps={
		option : {
    color,
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '5%',
        right: '4%',
        bottom: '10%',
				top: '10%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        name: '分',
        nameLocation: 'end'
    },
    yAxis: {
        type: 'category',
        data: data.map(item=>{
					return {
						value:item.name,
						textStyle: {
							fontSize: 16,
							}
					}
				}),
    },
    series: [
        {
            name: '',
            type: 'bar',
						barWidth :20,
						itemStyle:{
							normal: {
								barBorderRadius: 5
							}
						},
						label:{
							normal: {
				        show: true,
                formatter: '{c}分'
				        // textBorderColor: '#333',
				        // textBorderWidth: 2
					    }
						},
            data:data.map(item=>item.value)
        }
    ]
}
	}
  return(
    <div  className={`chart ${style.chart}`} style={{height}}>
      <IECharts {...myProps} resizable={true}/>
    </div>
  )
}

Charts5.propTypes={
	// data
}

export default Charts5
